<template>
	<div>
		<div class="brand_content">
			<div class="hidden_swiper">
				<scroller scroll-direction="horizontal" show-scrollbar="false" class="swiper-tab">
					<div class="brand_box" v-for="(item,index) in brandList" :key="item.id" @click="swichNav(index,item.id)">
						<div :class="[currentTab==index?'brand_image_box_click':'brand_image_box']">
							<div class="image_content">
								<image :src="item.logo" style="height:60px;width:60px"></image>
							</div>
						</div>
						<div><text :class="[currentTab==index?'brand_text':'brand_text_click']">{{item.name}}</text></div>
					</div>
				</scroller>
			</div>
			<div class="hidden_brand_box">
				<scroller class="brand_item_box" scroll-direction="horizontal" show-scrollbar="false">
					<div class="brand_item" @click="toGoods(item.id)" v-for="item in products" :key="item.id" v-if="products.length>0">
						<image class="brand_item_image" :src="item.thumbnail"></image>
						<div><text class="brand_item_text pd-L10 pd-R10">{{item.name}}</text></div>
						<div><text class="brand_item_price pd-L10 pd-R10">¥{{item.price}}</text></div>
					</div>
					<div class="empty" v-if="products.length==0">
						<div class='empty_img'>
							<image style="width: 196px;height: 131px;" src="http://cdn.rzico.com/v4.0/footprint-none.png"></image>
						</div>
						<text class='empty_title'>暂无数据</text>
					</div>
				</scroller>
			</div>
		</div>
		<div>
		</div>
	</div>
</template>
<script>
	import {
		list
	} from '../../../../api/brand';
	import {
		list as productList
	} from '../../../../api/product';
	import common from '../../../../appboard/common.js'
	export default {
		name: 'brand',
		data() {
			return {
				brandId: '',
				winWidth: 0,
				winHeight: 0,
				currentTab: 0,
				toView: '',
				brandList: [],
				brandProducts: [],
				products: [],
				tagIds: [],
			}
		},
		props: ['content'],
		created() { // 在实例创建完成后被立即调用
			this.loadBrand()
			this.loadProduct()
		},
		methods: {
			swichNav(index, brandId) {
				var that = this;
				this.brandId = brandId
				this.loadProduct()
				if (that.currentTab === index) {
					return false;
				} else {
					this.currentTab = index
				}
			},
			loadProduct() {
				productList({

					mchId: this.getGlobalData().mchId,
					brandId:this.brandId
				}).then(res => {
					this.products = res.data.data
					for(var i=0;i<this.products.length;i++){
						this.products[i].thumbnail=common.thumbnail(this.products[i].thumbnail,200,200)
					}
				})
			},
			loadBrand() {
				if (this.content.tagids != null) {
					this.tagIds = this.content.tagids.split(',');
					for (var i = 0; i < this.tagIds.length; i++) {
						this.tagIds[i] = parseInt(this.tagIds[i])
					}
				}
				list({
					mchId: this.getGlobalData().mchId,
					tagIds: this.tagIds,
				}).then(res => {
					this.brandList = res.data.data
					this.brandId = this.brandList[0].id
					setTimeout(()=>{
						this.loadProduct()
					},100)

				})
			},
		},
		components: {},
	}
</script>

<style scoped>
	.brand_content {
		margin-top: 20px;
		display: flex;
		padding-left: 20px;
		width: 710px;
		margin-left: 20px;
		padding-right: 20px;
		border-radius: 16px;
		background-color: white;
		flex-direction: column;
		padding-bottom: 30px;
		overflow: hidden;
	}

	.brand_tittle_content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.tittle {
		height: 34px;
		font-size: 36px;
		font-weight: 500;
		color: rgba(26, 26, 30, 1);
	}

	.subtitle_context {
		margin-top: 10px;
	}

	.subtitle_text {
		height: 23px;
		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 0.5);
	}

	.border-bottom {
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: var(--borderColor);
	}

	.pd-R10 {
		padding-right: 10px;
	}

	.pd-L10{
	        padding-left: 10px;
	}

	.swiper-tab {
		margin-top: 34px;
		width: 670px;
		text-align: center;
		overflow-x: auto;
		display: flex;
		flex-direction: row;
		height: 162px;
	}

	.swiper-tab-list {
		width: 110px;
		height: 68px;
		border: 1px solid rgba(213, 70, 51, 1);
		border-radius: 3px;
		flex-shrink: 0;
	}

	.on {
		color: blue;
		border-bottom: 3px solid blue;
	}

	.swiper-box {
		display: block;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}

	/* .swiper-box view {
	  text-align: center;
	} */

	.brand_box {
		width: 110px;
		display: flex;
		flex-direction: column;
		margin-right: 52px;
	}



	.brand_text {
		font-size: 24px;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(215, 38, 28, 1);
		line-height: 36px;
		margin-top: 15px;
		text-align: center;
		height: 30px;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 110px;
	}

	.brand_text_click {
		text-align: center;
		height: 30px;
		width: 110px;
		margin-top: 15px;
		font-size: 24px;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		line-height: 36px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.image_content {
		padding-top: 5px;
		padding-bottom: 5px;
	}

	.brand_image_box_click {
		width: 110px;
		height: 68px;
		border-style: solid;
		border-width: 1px;
		border-color: rgba(213, 70, 51, 0.5);
		border-radius: 6px;
		padding: 5px 5px 5px 5px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.brand_image_box {
		width: 110px;
		height: 68px;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(209, 209, 211, 0.2);
		border-radius: 6px;
		padding: 5px 5px 5px 5px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.hidden_brand_box {
		/* border: solid saddlebrown 1px; */
		/* height: 340px;
	  overflow: hidden; */
		/* margin-bottom: 20px; */
	}

	.brand_item_box {
		/* border: solid black 1px; */
		/* height: 400px; */
		overflow-x: auto;
		display: flex;
		flex-direction: row;
		/* padding-bottom: 20px; */
	}

	.brand_item {
		margin-right: 30px;
		width: 206px;
		padding-top: 1px;
		border-radius: 16px;
		padding-bottom: 15px;
		background-color: white;
		border-width:1px ;
		border-color:rgba(0, 0, 0, 0.1) ;
		border-style:solid ;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.brand_item_image {
		border-top-left-radius: 14px;
		border-top-right-radius: 14px;
		width: 204px;
		height: 204px;
		background: linear-gradient(180deg, rgba(244, 243, 245, 1) 0%, rgba(250, 250, 250, 1) 100%);
	}

	.brand_item_text {
		width: 192px;
		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		line-height: 36px;
		margin-top: 10px;
		height: 69px;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.brand_item_price {
		height: 23px;
		font-size: 20px;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(231, 91, 83, 1);
		margin-top: 10px;
	}

	.demo-text-1 {
		background-color: aqua;
	}

	.demo-text-2 {
		background-color: black;
	}

	.demo-text-1 {
		background-color: gold;
	}

	.page-section-spacing {
		margin-top: 60px;
	}

	.empty {
		width: 670px;
		height: 360px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.empty_img {
		width: 196px;
		height: 131px;
	}

	.empty_title {
		font-size: 28px;
		color: #888;
		display: block;
		margin-top: 20px;
	}
</style>
